<template>
	<!-- 选择基地，默认基地1 -->
	<view>
		<uni-data-select
			class="jidichoose"
		    v-model="value"
		    :localdata="jidirange"
		    @change="jidichange"
			:clear="false"
		>
		</uni-data-select>
	</view>
	
	<!-- 大棚 -->
	<view>
		<view>
			<uni-section title="大棚列表" type="line">
			</uni-section>
			<uni-card v-for="(item,index) in greenhouseList" :key="item.id" padding="0" spacing="0">
				<template v-slot:cover>
					<view class="custom-cover-dapeng">
						<image class="cover-image"  :src="item.img">
						</image>
					</view>
				</template>
				<uni-list>
					<uni-list-item :title="item.name" showArrow></uni-list-item>
				</uni-list>
			</uni-card>
		</view>
	</view>
  
</template>

<script setup>
import {ref} from "vue"

//基地
const value = ref(0);
const jidirange=ref([
	{ value: 0, text: "基地1" },
	{ value: 1, text: "基地2" },
	{ value: 2, text: "基地3" },
]);
function jidichange(e) {
        console.log("e:", e);
}

// 大棚
const cover1 = ref("../../static/images/test.png")
const greenhouseList=ref([
	{
		id:1,
		name:"大棚1",
		area:100,
		img:"../../static/images/test.png"
	},
	{
		id:2,
		name:"大棚2",
		area:100,
		img:"../../static/images/test.png"
	},
	{
		id:3,
		name:"大棚3",
		area:100,
		img:"../../static/images/test.png"
	},
])


</script>

<style lang="scss">
:deep(.jidichoose){
	width: 50vw;
	.uni-stat__select{
		width: 50vw;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.custom-dropdown-icon {
	    display: inline-block;
	    margin-left: 10px;
	    cursor: pointer;
	}
}

.custom-cover-dapeng {
	flex: 1;
	flex-direction: row;
	position: relative;
	height: 250rpx;
	image{
		width: 100%;
	}
}

</style>
